<template>
  <el-dialog :title="$t('page.form.accounttransfer')" :visible.sync="visible" :close-on-click-modal="false" append-to-body width="500px">
    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="180px" label-position="left" :inline="false">
      <template v-if="data">
        <el-form-item :label="$t('page.form.settlementcurrency')" size="mini" prop="">
          <span>{{machConfig.settleCurrency}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips12')" size="mini" prop="">
          <span>{{data.totalAccountCashAmount}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips13')" size="mini" prop="">
          <span>{{machConfig.rateSettle.minTransAmount/100}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips14')" size="mini" prop="">
          <span>{{machConfig.rateSettle.maxTransAmount/100}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips15')" size="mini" prop="">
          <span>{{machConfig.rateSettle.transPerFee/100}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <!--  -->
        <el-form-item :label="$t('page.form.tips41')" size="mini" prop="extraType">
          <el-radio-group v-model="mainQuery.extraType" @change="changebox">
            <el-radio label="1">{{ $t('page.form.tips17') }}</el-radio>
            <el-radio label="2">{{ $t('page.form.tips18') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  -->
        <el-form-item :label="$t('page.form.tips21')" v-if="mainQuery.extraType == 2" size="mini" prop="fetchMainData">
          <el-input placeholder="" style="margin-bottom:10px;" v-model="mainQuery.targetMchEmail" @keyup.enter.native="fetchMainData" clearable></el-input>
          <span v-if="isValid ==1" class="tipsSuccess">{{ $t('page.form.tips19') }}{{settleCurrency}} </span>
          <span v-if="isValid ==0" class="tipsCatch">{{ $t('page.form.tips20') }}</span>
          <el-button @click="checkEmail" size="mini" type="primary">{{ $t('page.form.tips42') }}</el-button>
        </el-form-item>
        <!--  -->
        <template v-if="mainQuery.extraType == 1">
          <el-form-item :label="$t('page.form.tips22')" size="mini" prop="fetchMainData">
            <el-input placeholder="" v-model="mainQuery.bankAccountName" @keyup.enter.native="fetchMainData" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('page.form.tips23')" size="mini" prop="fetchMainData">
            <el-input placeholder="" v-model="mainQuery.bankAccountNo" @keyup.enter.native="fetchMainData" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('page.form.tips24')" size="mini" prop="fetchMainData">
            <el-input placeholder="" v-model="mainQuery.bankOpenBankNo" @keyup.enter.native="fetchMainData" clearable></el-input>
          </el-form-item>
        </template>
        <!--  -->
              <el-form-item :label="$t('page.form.tips25')" size="mini" prop="targetCurrency">
          <el-select v-model="mainQuery.targetCurrency" :placeholder="$t('page.form.tips25')" :disabled="mainQuery.extraType == 2" clearable @change="fetchMainData">
            <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips26')" size="mini" prop="transAmount">
          <el-input placeholder="" :max="machConfig.rateSettle.maxTransAmount/100" @input="getTransInfo" :min="machConfig.rateSettle.minTransAmount/100" v-model.number="mainQuery.transAmount" @keyup.enter.native="fetchMainData" clearable></el-input>
        </el-form-item>
  
        <el-form-item :label="$t('page.form.tips27')" size="mini" prop="">
          <span>{{transInfo.transAmount / 100 || 0}} {{settleCurrency}}</span> <span>   {{ $t('page.form.tips29') }}{{transInfo.transRate / 10000 || 0}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips28')" size="mini" prop="fetchMainData">
          <el-input placeholder="" v-model="mainQuery.code" @keyup.enter.native="fetchMainData" clearable></el-input>
        </el-form-item>
      </template>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="mini">{{ $t('page.form.close') }}</el-button>
      <el-button @click="submit" type="primary" size="mini">{{ $t('page-register.form.submit') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ApiMain from "@/api/settle.tradeTrans";

export default {
  mixins: [],
  props: ["accountTypeOptions", "eventTypeOptions", "statusOptions"],
  components: {},
  data() {
    return {
      visible: false,
      loading: false,
      isValid: -1,
      mainQueryRaw: null,
      mainQuery: {
        extraType: '2',
        type: 2,
        code: undefined,
        transAmount: undefined,
        targetCurrency: undefined,
        targetMchEmail: undefined,
        bankAccountName: undefined,
        bankAccountNo: undefined,
        bankOpenBankNo: undefined,
      },
      currencyOptions: [

      ],
      rules: {
        code: [{ required: true, message: this.$t('page.form.tips30'), trigger: "blur" }],
        extraType: [{ required: true, message:   this.$t('page.form.tips31'), trigger: "blur" }],
        transAmount: [{ required: true,message:   this.$t('page.form.tips32'), trigger: "blur" }],
        targetCurrency: [{ required: true, message:   this.$t('page.form.tips33'), trigger: "blur" }],
        targetMchEmail: [{ required: true,message:   this.$t('page.form.tips34'), trigger: "blur" }],
        bankAccountName: [{ required: true, message:   this.$t('page.form.tips35'), trigger: "blur" }],
        bankAccountNo: [{ required: true,message:   this.$t('page.form.tips43'), trigger: "blur" }],
        bankOpenBankNo: [{ required: true,message:   this.$t('page.form.tips36'), trigger: "blur" }],

      },
      transInfo: {},
      machConfig: {
        rateSettle: {}
      },
      id: null,
      data: {},
      settleCurrency: "",
      action: "",
      activeName: "create",
    };
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {
    changebox(){
      this.mainQuery.targetCurrency= undefined
      this.mainQuery.transAmount=undefined
    },  
    async getTransInfo(res) {
      if (this.isValid == -1 && this.mainQuery.extraType ==2) return this.$message.error(this.$t('page.form.tips37'))
      if (!this.mainQuery.targetCurrency && this.mainQuery.extraType ==1) return this.$message.error(this.$t('page.form.tips38'))
      if ((this.mainQuery.transAmount + this.machConfig.rateSettle.transPerFee / 100) > this.data.totalAccountCashAmount) return this.$message.error('提现金额+手续费不得大于可提现金额')

      var info = {};

      try {
        info = await ApiMain.getAmout({
          "sourceCurrency": this.machConfig.settleCurrency,
          "targetCurrency": this.mainQuery.targetCurrency,
          "type": 2,
          "amount": this.mainQuery.transAmount * 100,
          "mchId": this.machConfig.mchId
        })
      } catch (err) {}
      this.transInfo = info
    },
    async checkEmail() {
      // 校验邮箱
      if (!this.mainQuery.targetMchEmail) return this.$message.error(this.$t('page.form.tips39'))
      let data = await ApiMain.checkEmail({
        email: this.mainQuery.targetMchEmail
      })
      if (data.isValid == 1) {
        this.isValid = 1
        this.settleCurrency = data.settleCurrency
        this.mainQuery.targetCurrency = data.settleCurrency

      } else {
        this.isValid = 0
      }
    },
    fetchMainData() {
      //   回车事件
    },
    show(data) {
      this.data = data
      this.fetchData();

      this.visible = true;

    },
    async fetchData() {
      this.currencyOptions = await ApiMain.optinos()
      let config = await ApiMain.getConfig()
      this.machConfig = config
      console.log('初始参数',this.mainQuery)
    },
    close() {
      this.visible = false;
      this.$emit("dialog-close");
      this.reset()
    },
      verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },
    async submit() {
      if (!this.verifyForm()) return false;
      this.loading = true;
      let from = JSON.parse(JSON.stringify(this.mainQuery))
      from.transAmount = from.transAmount * 100
      from.sourceCurrency = this.machConfig.settleCurrency
      let data = await ApiMain.addTradeTrans(from)
      console.log('提交结果', data)
      this.$message({ message: this.$t('page.form.tips40'), type: 'success' });
      this.loading = false;
      this.close()
    },
    reset() {
      this.transInfo = {};
      this.$refs["main-form"] && this.$refs["main-form"].resetFields();
      this.id = null;
      this.data = null; 
      this.mainQuery={
        type:2,
        extraType:'2'
      }
      this.activeName = "create";
    },
  },
};
</script>

<style lang="scss" scoped>
.wire {
  height: 1px;
  width: 100%;
  background-color: black;
  margin: 20px 0px;
}
.tipsSuccess {
  color: #3ab54a;
}
.tipsCatch {
  color: red;
}
</style>
